<template>
  <div class="firstTab">
    <div :class="{ 'select-item': true, active: isActive === index }" v-for="(item, index) in tabList" :key="item.id"
      @click="changeActive(index, item.name)">
      <img style="height:1.2rem;padding-left:.16rem;margin: .05rem auto 0;display: block;"
        :src="`${isActive === index?require(`@/assets/cityTraffic/${index + 1}_a.png`):require(`@/assets/cityTraffic/${index + 1}.png`)}`" />
      <!-- <div class="font" :style="`color:${color(index)}`">{{ item.name }}</div>
      <div class="bgBox">
        <transition name="fade">
          <div class="bgAcitve" :style="`border-radius:10px;width:.52rem;background: ${color(index)};height:3px;`"
            v-show="isActive === index"></div>
        </transition>
      </div> -->

    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getChangeDate } from './choostTime/getTime'

export default {
  name: 'FirstTab',
  data() {
    return {
      tabList: [
        { id: 1, name: '全省' },
        { id: 2, name: '线路' },
        { id: 3, name: '收费站' },
        { id: 4, name: '省界门架' },
        { id: 5, name: '地市' },
      ],
      isActive: 0
    }
  },
  computed: {
    ...mapGetters(['firstTabId']),
    color() {
      return (index) => {
        return ['#D0650A', '#5F6CC1', '#0F8B15', '#1490AA', '#086AB1'][index]
      }
    },
  },
  mounted() {
    this.isActive = this.firstTabId
  },
  methods: {
    changeActive(index, name) {
      this.backTop()
      this.isActive = index
      const { startData, endData } = getChangeDate()
      this.$store.commit('SETFIRSTFLAG', 9)
      this.$store.commit('SETTIMEOBJ', { startData, endData })
      this.$store.commit('SETTABINDEX', 1)
      this.$store.commit('SETTABLEINDEX', 1)
      this.$store.commit('SETFIRSTTABID', index)
      this.$store.commit('SETFIRSTTABLEACTIVE', 0)
      this.$store.commit('SETTIMEACTIVE', 0)
      // 重置范围选择
      this.$store.commit('SETSELECTRANGE', { start: 1, end: 20 })
    },
    // 回到顶部
    backTop() {
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.firstTab {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0.3rem 0 0.3rem;
  border-bottom: 1px solid #F6F6F6;
  /*position: fixed;*/
  /*top: 0;*/
  /*width: 100%;*/
  /*background: #fff;*/
  /*z-index: 9999;*/

  .select-item {
    text-align: center;
    font-size: 0.26rem;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #666666;
    line-height: 0.35rem;

    .font {
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    }

    p {
      text-align: center;
    }

    .bgBox {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 0.05rem;
      height: 0.06rem;

      // .bgAcitve {
      //   width: 0.5rem;
      //   height: 0.06rem;

      //   background: url("~@/assets/feeManage/rect.png") no-repeat;
      //   background-size: 100% 100%;
      //   background-position: center center;
      // }
    }

    &.active {
      color: #4375C9;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;

      .font {
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 600;
      }
    }
  }
}
</style>
